<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图文详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        [v-cloak]{
            display: none !important;
        }
        .detil{
            width: 90%;
            margin: 0 auto;
        }
        .detil img{
            width: 100%;
        }
        .aActive{
            color: #cf0c0c;
        }
        .aNoActive{
            color: #819fc0;
        }
        .mui-table-view:before,.mui-table-view:after{
            display: none;
        }
        .mui-table-view-cell{
            padding: 6px 15px 6px 30px;
        }
    </style>
</head>
<body style="background: white;">

<div id="vue" v-cloak>
    <header class="mui-bar mui-bar-nav top-color">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <h1 class="mui-title" style="color: white;">
            达人秀场
        </h1>
    </header>


    <div style="margin-top: 60px;">
        <div class="mui-content" style="background: white;" >
            <h4 style="margin: 10px auto;width: 300px; text-align: center;font-weight: bold">{{cms.title}}</h4>
            <img :src="item"v-for="item in imageList" style="margin-bottom: 8px;width: 100%">
            <div class="detil" v-html="cms.content" style="padding-top: 20px;">
                {{cms.content}}
            </div>

        </div>
    </div>
    <div style="padding: 20px;margin-bottom:30px;">
        <div class="title" class="flex-container" style="padding-bottom: 10px;">
            评论
            <a style="float: right;margin-right: 20px;" class="aNoActive" id="love" v-on:click="cmsLove">
                <span class="mui-icon-extra mui-icon-extra-like"></span>
            </a>
        </div>
        <ul class="mui-table-view">
            <div id="zanwu" style="display: none;margin: 40px 30px; text-align: center;color: #999999">暂无评论</div>
            <li class="mui-table-view-cell replay_li" v-for="item in reviewList" :key="item.id">
                <span class="replay_span" v-if="item.account_info.imageUrl==null ||item.account_info.imageUrl==''">
                    <img src="${base!}/assets/front/h5/img/man.png" class="replay_photo">
                </span>
                <span class="replay_span" v-else>
                    <img :src="item.account_info.imageUrl" class="replay_photo">
                </span>
                <div v-on:click="clickReply(item.id,item.reviewOpName,item.reviewOpId)"><span class="username">{{item.reviewOpName}}:</span><span > {{item.content}}</span></div>
                <div v-for="item2 in item.replyVOList" :key="item2.id" v-on:click="clickReply2(item.id,item2.reviewOpName,item2.reviewOpId,item2.id)">
                    <p ><span class="username">{{item2.reviewOpName}}</span>回复<span class="username">{{item2.reviewFatherName}}:</span>{{item2.content}}</p>
                </div>
            </li>
        </ul>
    </div>

    <nav class="mui-bar mui-bar-tab" style="height: 40px;">
        <div class="mui-input-row mui-password" style="border: 0px;">
            <input type="text" id="place" v-model="content" class="mui-input-clear mui-input" placeholder="请输入评论内容" style="margin-bottom: 0px;width: 80%;">
            <button type="button" v-on:click="isPlHf" style="width: 20%;top: 0px;line-height:1;margin-top: 0"
                    class="mui-btn mui-btn-primary" id="review">评论</button>
        </div>
    </nav>
</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var _this;

    var vue = new Vue({
        el: '#vue',
        data: {
            cms: '',
            cmsTitle:'',
            reviewList:'',
            content:'',    //评论内容
            rcontent:'',   //回复内容
            reviewId:'',  //回复父级编号
            reviewFatherName:'',//回复父级发布人名称
            reviewFatherId:'', //回复父级发布人编号
            reviewReplyId:'', //回复父级回复编号（区分回复的是评论底下哪条回复）
            isHf:1, //是评论还是回复
            imageList:[]

        },
        created:function () {   //实例初始化创建完成执行

            this.getCmsList();     //调用自身方法
            this.jqueryLin();
            this.addPageViews();  //增加浏览量
            this.queryIsLike();

        },
        methods:{              //定义封装方法
            //获取列表
            getCmsList:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/cmsArticle.html",
                    dataType:"JSON",
                    data:{
                        id:'${id!}',
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.cms = d;
                            self.cmsTitle = d.title;
                            var str =d.imageUrlStrs.split(",");
                            self.imageList = str;
                            self.getReview();
                        } else {

                        }
                    }
                });

            },
            //获取评论回复列表
            getReview:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/getReview.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.reviewList = d;
                        } else {

                        }
                    }
                });

            },
            cmsLove:function(){ //点赞接口
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/cmsLike.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            if(data.msg=='ok2'){
                                $("#love").removeClass("aActive")
                                $("#love").addClass("aNoActive")
                            }
                            if(data.msg=='ok1'){
                                $("#love").removeClass("aNoActive")
                                $("#love").addClass("aActive")
                            }
                        } else {
                            if(data.code == 2){
                                layerAlert("请先登录")
                            }
                        }
                    }
                });
            },
            queryIsLike:function(){ //查询是否点赞
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/queryIsLike.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            $("#love").removeClass("aNoActive")
                            $("#love").addClass("aActive")
                        } else {

                        }
                    }
                });
            },
            addPageViews:function(){
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/addPageViews.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {

                        } else {

                        }
                    }
                });
            },
            //发布评论
            review:function () {
                var self = this;

                if(self.cmsTitle.trim()=='' || self.cmsTitle==null ||self.content.trim()=='' ||self.content==null ) {
                    layerAlert("评论内容不能为空");
                    return;
                }

                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/review.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                        cmsTitle:self.cmsTitle,
                        content:self.content
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.content='';
                            layerAlert("评论成功");
                            self.getReview();
                        }  else if(data.code==2){
                            alert("您没有登录，请登录！");
                            window.location.href="${base!}/open/H5/login/login.html"
                        }
                    }
                });

            },
            //点击回复
            clickReply:function(reviewId,reviewFatherName,reviewFatherId){
                this.reviewId = reviewId; //回复父级编号
                this.reviewFatherName = reviewFatherName;//回复父级发布人名称
                this.reviewFatherId = reviewFatherId; //回复父级发布人编号
                this.textBian();
            },
            //点击回复下回复
            clickReply2:function(reviewId,reviewFatherName,reviewFatherId,reviewReplyId){
                this.reviewId = reviewId; //回复父级编号
                this.reviewFatherName = reviewFatherName;//回复父级发布人名称
                this.reviewFatherId = reviewFatherId; //回复父级发布人编号
                this.reviewReplyId= reviewReplyId; //回复父级回复编号（区分回复的是评论底下哪条回复）
                this.textBian();
            },
            //变换样式
            textBian:function(){
                $("#place").attr("placeholder",'请输入回复内容');
                $("#review").html("回复");
                $("#place").focus();
                this.isHf=2;
            },
            //回复评论
            reply:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/reply.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                        cmsTitle:self.cmsTitle,
                        content:self.content,
                        reviewId : self.reviewId, //回复父级编号
                        reviewFatherName:self.reviewFatherName,//回复父级发布人名称
                        reviewFatherId:self.reviewFatherId, //回复父级发布人编号
                        reviewReplyId:self.reviewReplyId //回复父级回复编号（区分回复的是评论底下哪条回复）
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.content='';
                            layerAlert("回复成功");
                            self.getReview();
                        } else if(data.code==2){
                            alert("您没有登录，请登录！");
                            window.location.href="${base!}/open/H5/login/login.html"
                        }
                    }
                });

            },
            //判断调用评论还是回复
            isPlHf:function(){
                if(this.isHf==1){ //评论
                    this.review();
                }else{ //回复
                    this.reply();
                }
            },
            //初始化jquery监听
            jqueryLin:function () {
                _this = this;
            }
        },
        watch:{     //监听器
            reviewList:function () {
                // console.log(this.reviewList)
                if(this.reviewList.length<1){
                    console.log("暂无评论...")
                    $("#zanwu").css("display","block");
                }else {
                    $("#zanwu").css("display","none");
                }

            }
        }

    })

    $("#place").blur(function () {
        if(_this.content.length<1){
            $("#place").attr("placeholder",'请输入评论内容');
            $("#review").html("评论");
            _this.isHf=1;
        }
    })


    //处理时间戳
    function timestamp(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes();
        s = date.getSeconds();
        return Y+M+D+h+m;
    }

    function layerAlert(msg) {
        //提示
        layer.open({
            content: msg
            ,skin: 'msg'
            ,time: 2 //2秒后自动关闭
        });
    }

</script>
</body>
</html>
